<template>
  <div class="search">
    <Card>
      <div class="table-page-search-wrapper">
        <Form ref="searchForm" :model="pageParams" inline :label-width="100">
          <FormItem label="登录名" prop="userName">
            <Input type="text" v-model="pageParams.userName" placeholder="请输入登录名"/>
          </FormItem>
          <FormItem label="手机号" prop="mobile">
            <Input type="text" v-model="pageParams.mobile" placeholder="请输入手机号"/>
          </FormItem>
          <span v-if="drop">
            <FormItem label="邮箱" prop="email">
              <Input type="text" v-model="pageParams.email" placeholder="请输入邮箱"/>
            </FormItem>
          </span>
          <FormItem>
            <Button type="primary" @click="handleSearch()">查询</Button>&nbsp;
            <Button @click="handleResetForm('searchForm')">重置</Button>
            <a class="drop-down" @click="dropDown">{{ dropDownContent }}
              <Icon :type="dropDownIcon"></Icon>
            </a>
          </FormItem>
        </Form>
      </div>

      <div class="table-operator">
        <ButtonGroup>
          <Button :disabled="$auth('systemUserEdit')?false:true" type="primary" @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
      </div>
      <s-table :url="$apis.developer.page" :columns="columns" :params="pageParams" ref="table">
        <template slot="status" slot-scope="{ row }">
          <Tag v-if="row.status===1" color="success">正常</Tag>
          <Tag v-else-if="row.status===2" color="warning">锁定</Tag>
          <Tag v-else="" color="error">禁用</Tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <Button
            size="small"
            type="text"
            :disabled="$auth('systemUserEdit')?false:true"
            @click="handleModal(row)">编辑</Button>
        </template>
      </s-table>
    </Card>
    <developer-modal ref="developerModal" @reloadTable="handleSearch"></developer-modal>
  </div>
</template>

<script>
import DeveloperModal from './modal'
import updatePassword from './form/update-password'

export default {
  name: 'SystemUser',
  components: { DeveloperModal },
  data () {
    return {
      drop: false,
      dropDownContent: '展开',
      dropDownIcon: 'ios-arrow-down',
      pageParams: {},
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '登录名',
          key: 'userName'
        },
        {
          title: '昵称',
          key: 'nickName'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '手机号',
          key: 'mobile'
        },
        {
          title: '状态',
          slot: 'status',
          key: 'status'
        },
        {
          title: '描述',
          key: 'userDesc'
        },
        {
          title: '注册时间',
          key: 'createTime'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 150
        }
      ]
    }
  },
  methods: {
    dropDown () {
      if (this.drop) {
        this.dropDownContent = '展开'
        this.dropDownIcon = 'ios-arrow-down'
      } else {
        this.dropDownContent = '收起'
        this.dropDownIcon = 'ios-arrow-up'
      }
      this.drop = !this.drop
    },
    handleModal (data) {
      this.$refs['developerModal'].handleShow(data)
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    },
    handleSearch () {
      this.$refs['table'].search()
    },
    updatePassword () {
      this.$Modal.confirm({
        title: '修改密码',
        width: 600,
        render: (h) => {
          return h(updatePassword, {
            props: {}
          })
        },
        onOk: () => {
          updatePassword.test()
        }
      })
    },
    handleClick (name, row) {
      switch (name) {
        case 'sendToEmail':
          this.$Message.warning('发送至密保邮箱,开发中...')
          break
        case 'updatePassword':
          this.updatePassword()
      }
    }
  },
  mounted: function () {
    this.handleSearch()
  }
}
</script>
